/*
 * @Author: hongbin
 * @Date: 2022-04-27 15:37:55
 * @LastEditors: hongbin
 * @LastEditTime: 2022-05-01 21:24:54
 * @Description:第一块
 */
import { FC, ReactElement } from "react";
import Lottie from "react-lottie-player";
import styled, { css } from "styled-components";
import { FlexDiv, flexCenter } from "../../styled";
import { rangeTrans } from "../../utils";
import lottieJson from "../../assets/computer.json";

interface IProps {
  percent: number;
}

const RuYiTitle: FC<IProps> = ({ percent }): ReactElement => {
  return (
    <Container
      style={{
        position: "fixed",
        opacity: percent > 1.01 ? rangeTrans((percent - 1) * 10, [1, 0]) : 1,
        transform: `scale(${
          percent > 1 ? rangeTrans((percent - 1) * 20, [1, 0]) : 1
        })`,
        zIndex: 6,
      }}
    >
      <AsideDesc
        style={{
          opacity: rangeTrans(percent, [-1, 2]),
          transform: `translateX(-${rangeTrans(percent, [
            0,
            (window.IsPhone ? -1 : 1) * 12,
          ])}vmax) translateY(-${rangeTrans(percent, [3, 0])}vmax)`,
        }}
      >
        <span
          style={{
            opacity: rangeTrans(percent, [-2, 2]),
            transform: `translateY(${rangeTrans(
              percent,
              [-9, 0]
            )}vmin) scale(${rangeTrans(percent, [28, 1])})`,
          }}
        >
          如意低代码平台
        </span>
        <span
          style={{
            opacity: rangeTrans(percent, [-2, 1]),
            transform: `translate(${rangeTrans(
              percent,
              [10, 0]
            )}vmax,${rangeTrans(percent, [85, 0])}vmin) scale(${rangeTrans(
              percent,
              [14, 1]
            )})`,
          }}
        >
          快速搭建静态页面
        </span>
        <FlexDiv
          style={{
            opacity: rangeTrans(percent, [-2.5, 1]),
          }}
          space="1vw"
        >
          <Button
            style={{
              transform: `translate(${rangeTrans(
                percent,
                [-15, -1]
              )}vmax,${rangeTrans(percent, [80, 0])}vmin)`,
              opacity: rangeTrans(percent, [-3.5, 1]),
            }}
          >
            <a href="http://ruyi.hongbin.xyz" target="_blank" rel="noreferrer">
              一键部署
            </a>
          </Button>
          <Button
            style={{
              transform: `translate(${rangeTrans(
                percent,
                [15, 1]
              )}vmax,${rangeTrans(percent, [80, 0])}vmin)`,
              opacity: rangeTrans(percent, [-3.5, 1]),
            }}
          >
            <a href="http://ruyi.hongbin.xyz">立刻体验</a>
          </Button>
        </FlexDiv>
      </AsideDesc>

      <Lottie
        loop
        animationData={lottieJson}
        play
        style={{
          width: "50vmax",
          height: "50vmax",
          position: "absolute",
          right: `${rangeTrans(percent, [20, 0])}vw`,
          opacity: rangeTrans(percent, [-1, 2]),
          top: window.IsPhone ? 0 : undefined,
        }}
      />
    </Container>
  );
};

export default RuYiTitle;

const Button = styled.button`
  border-radius: 88% 12% 90% 10% / 15% 76% 24% 85%;
  background: linear-gradient(40deg, #4545df, #cf739a);
  font-size: 1.5vw;
  ${flexCenter};
  border: none;
  outline: none;
  cursor: pointer;
  color: ${(props) => props.theme.lightText};
  font-weight: bold;
  padding: 1vh 2vw;
  box-shadow: inset -4px 4px 3px 4px #6c51cb, inset 3px 0px 4px 2px #bd6da3;
  transition: box-shadow 0.3s ease;
  letter-spacing: 2px;
  :hover {
    /* box-shadow: -12px 8px 0px 5px #6c51cb, 6px -4px 4px 4px #935fb7; */
    box-shadow: -4px 4px 3px 4px #6c51cb, 3px 0px 4px 2px #bd6da3;
  }
  & > a {
    color: inherit;
    font-family: inherit;
  }
`;

const AsideDesc = styled.aside`
  display: flex;
  flex-direction: column;
  border-radius: 35% 65% 64% 36% / 38% 25% 75% 62%;
  background: linear-gradient(40deg, #4545df, #cf739a);
  color: ${(props) => props.theme.lightText};
  padding: 3vmax;
  user-select: none;
  font-size: 1.5vmax;
  height: 60vmin;
  width: 60vmax;
  ${flexCenter};
  letter-spacing: 1px;
  & > :nth-child(2) {
    align-self: flex-end;
    margin-right: 13vw;
  }
  & > :first-child {
    font-size: 5vw;
    text-shadow: 8px 2px 0px #6851ce;
  }
  span {
    margin-bottom: 2vmin;
  }
`;

const Container = styled.div`
  bottom: 0;
  width: 100vw;
  height: 100vh;
  ${flexCenter};
  ${(props) =>
    props.theme.mode === "dark" &&
    css`
      filter: brightness(0.5);
    `}
`;
